<template>
  <div>
    <el-card>
      <div slot="header">
        <span>时间分布</span>
      </div>
      <div style="width:100%;height:100%;">
        <div v-show="showChart">
          <div
            id="ring"
            style="width:100%;height:250px;">
          </div>
        </div>
        <div v-show="showChart == false">
          {{message}}
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
require('echarts/theme/macarons')

export default {
  name: 'monthly-working-ring-chart',
  props: [
    'year',
    'month',
    'reLoad'
  ],
  data () {
    return {
      chart: '',
      message: '暂无数据',
      showChart: true,
      ringName: [],
      ringData: {}
    }
  },
  watch: {
    reLoad: function (val, oldVal) {
      this.showChart = true
      this.chart.clear()
      this.chart.showLoading()
      this.getRingChartDate()
    }
  },
  methods: {
    getRingChartDate () {
      axios({
        method: 'post',
        url: 'api/getmonthlyworkingringchartdata',
        data: {
          user_token: this.$store.state.token,
          month: this.month,
          year: this.year
        }
      })
      .then((res) => {
        if (res.data.code === '200') {
          this.ringName = res.data.data.name
          if (this.ringName === undefined) {
            this.showChart = false
            this.message = '暂无数据'
          } else {
            let ringData = []
            for (let item in res.data.data.time) {
              ringData.push({name: item, value: res.data.data.time[item]})
            }
            this.ringData = ringData
            this.makeRingChart()
          }
        } else {
          this.$store.commit('openMessage', '请求失败，请重试')
          this.showChart = false
          this.message = '请求失败，请重试'
        }
        this.chart.hideLoading()
      })
      .catch((res) => {
        this.$store.commit('openMessage', '请求失败，内部错误')
        this.showChart = false
        this.message = '请求失败，请重试'
        this.chart.hideLoading()
      })
    },
    makeRingChart () {
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.ringName
        },
        series: [
          {
            name: '工作时间',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '28',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.ringData
          }
        ]
      })
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.chart = echarts.init(document.getElementById('ring'), 'macarons')
      this.showChart = true
      this.chart.showLoading()
      this.getRingChartDate()
    })
  }
}
</script>